<template>

    <div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
               <el-form-item label="原密码" prop="pass" :label-width="formLabelWidth">
                 <el-col :span="8">  <el-input v-model="ruleForm.pass" placeholder="请输入原密码" type="password"></el-input></el-col>
                </el-form-item>
                <el-form-item label="新密码" prop="newpass" :label-width="formLabelWidth">
                 <el-col :span="8"><el-input v-model="ruleForm.newpass" placeholder="请输入新密码" id="newkey" type="password"></el-input></el-col>
                </el-form-item>
                <el-form-item label="重复新密码" prop="checknewpass" :label-width="formLabelWidth">
                 <el-col :span="8">  <el-input v-model="ruleForm.checknewpass" placeholder="请再次输入新密码" id='newkey1' type="password"></el-input></el-col>
                </el-form-item>
                </el-form>
            <div class="grid-content bg-purple">
           <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          </div>
    </div>
</template>

<script>
    export default {
        name: "Password",
        data() {
            /*****检验两次密码是否一致***/
            var validatePass = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入密码"));
                } else {
                    if (this.ruleForm.checknewpass !== "") {
                        this.$refs.ruleForm.validateField("checknewpass");
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请再次输入密码"));
                } else if (value !== this.ruleForm.newpass) {
                    callback(new Error("两次输入密码不一致!"));
                } else {
                    callback();
                }
            };
            var validateUserName = (rule, value, callback) => {
                var reg_username = /^\w{6,12}$/;
                var flag = reg_username.test(value)
                if (!value) {
                    return callback(new Error('用户名不能为空'));
                }
                else if(!flag){
                    return callback(new Error('用户名长度为6-12位'))
                }
                else callback();
            };
            var validateName = (rule, value, callback) => {
                var reg_username = /^^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{1,12}$/;
                var flag = reg_username.test(value)
                if (!value) {
                    return callback(new Error('昵称不能为空'));
                }
                else if(!flag){
                    return callback(new Error('昵称长度不能超过12位'))
                }
                else callback();
            };
            return {
                isshow:false,
                uploadParm: {}, //图片的上传
                ruleForm: {},//修改密码的表单
                activeName: "first",
                loading: true,
                baseUrl: '/avatar/',
                user: {},//用户信息表单
                formLabelWidth: "150px",
                username:"",
                role:"",
                imageUrl: '',
                avatar: '',
                avatar1:"http://localhost:8081/user/uploadAvatar",
                token:localStorage.getItem("token"),
                userList:[],
                rules: {


                    pass: [
                        {
                            required: true,
                            trigger: "blur",
                            message: "请输入密码"
                        }
                    ],
                    newpass: [
                        {
                            validator: validatePass,
                            trigger: "blur"
                        }
                    ],
                    checknewpass: [
                        {
                            validator: validatePass2,
                            trigger: "blur"
                        }
                    ],
                    username: [
                        {
                            validator: validateUserName,
                            trigger: "blur"
                        }
                    ],
                    name: [
                        {
                            validator: validateName,
                            trigger: "blur"
                        }
                    ],
                    email: [
                        {
                            required: true,
                            message: "请输入电子邮箱"
                        },
                        {
                            pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/,
                            message: "请输入有效的邮箱"
                        }
                    ],
                }
            };
        },
        created() {



        },

        methods: {


            //修改密码
            submitForm(ruleForm) {
                if (this.$store.getters.getUser.username) {

                    this.username = this.$store.getters.getUser.username
                }

                var obj = {
                    username: this.username,
                    oldpass: this.ruleForm.pass,
                    password: this.ruleForm.newpass
                };

                this.$axios.post('/user/alterPassword',obj, {
                    headers: {
                        "Authorization": localStorage.getItem("token")
                    }
                }).then(response => {

                    response=response.data
                    if (response.code == 200) {
                        this.$message({
                            message: "保存成功",
                            type: "success"
                        });
                    } else {
                        this.$message({
                            message: "修改失败" + response.msg,
                            type: "error"
                        });
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>